<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #div{
                margin: auto;
                border: soild 1px;
                width: 300px;
                height: 400px;
            }
            #ta{
                margin: auto;

            }
        </style>

        <script type="text/javascript">
            function mouseOver(img,src){
                img.style.border = "solid 1px";

                var big_img = document.getElementById("bigImage");
                big_img.src = "image/" + src;
            }

            function mouseOut(img){
                img.style.border = "";
            }
        </script>
    </head>
    <body>
        <div id="showdiv">
            <table  id="ta">
                <tr width=300px> 
                    <td colspan="5"><input type="image" src="image/show1_big.jpg" id="bigImage"></td>
                    
                </tr>
                <tr height=60px>
                    <td><input type="image" src="image/show1.jpg" onmouseover="mouseOver(this,'show1_big.jpg')" onmouseout="mouseOut(this)"></td>
                    <td><input type="image" src="image/show2.jpg" onmouseover="mouseOver(this,'show2_big.jpg')" onmouseout="mouseOut(this)"></td>
                    <td><input type="image" src="image/show3.jpg" onmouseover="mouseOver(this,'show3_big.jpg')" onmouseout="mouseOut(this)"></td>
                    <td><input type="image" src="image/show4.jpg" onmouseover="mouseOver(this,'show4_big.jpg')" onmouseout="mouseOut(this)"></td>
                    <td><input type="image" src="image/show5.jpg" onmouseover="mouseOver(this,'show5_big.jpg')" onmouseout="mouseOut(this)"></td>
                </tr>
            </table>
        </div>
    </body>
</html>